<template>
  <div class="me-box">
    <van-nav-bar title="地址管理" left-arrow @click-left="onClickLeft"/>
    <van-address-list class="list" v-model="chosenAddressId"
      :list="list"
      @add="onAdd"
      @edit="onEdit"/>

      <!-- 添加地址 -->
      <van-popup v-model="show" round position="bottom" :style="{ height: '70%' }">
        <van-address-edit :area-list="areaList" @save="onSave"/>
      </van-popup>

      <!-- 修改地址 -->
      <van-popup v-model="show1" round position="bottom" :style="{ height: '70%' }">
        <van-address-edit :address-info="addressInfo" show-delete @delete="onDelete" :area-list="areaList" @save="onSave1"/>
      </van-popup>
  </div>
</template>

<script>
  import { addAddress, del, editAddress, myAddress } from '../../apis/meApi'
  import { areaList } from '@vant/area-data'
  export default {
    data(){
      return {
        chosenAddressId: 'ID-1650768173911',
        // 我的地址列表
        list: [
          
        ],
        areaList,
        show:false,
        show1:false,

        address:{},

        addressInfo:{},
        addId:''
      }
    },

    methods: {
      // 返回我的页面
      onClickLeft(){
      this.$router.go(-1);
      },

      // 编辑地址
      onEdit(item, index) {
        item.areaCode = item.tag 
        item.addressDetail = item.tag.slice(item.tag.indexOf('/')+1)
        this.addressInfo = item
        this.show1 = true
        this.addId = item.id
      },
      // 删除地址
      onDelete(){
        del(this.$store.getters['common/user'].id,this.addId).then(res => {
          console.log(res);
          if (res.code === 200) {
            this.show1 = false
            this.getAddress()
          }
        })
      },

      // 打开添加地址面板
      onAdd() {
        this.show = true
      },
      // 添加地址
      onSave(res) {
        console.log(res);
        this.address.userId = String(this.$store.getters['common/user'].id),
        this.address.name = res.name,
        this.address.phone = res.tel,
        this.address.address = res.province + res.city + res.county + res.addressDetail,
        this.address.tag = res.areaCode + '/' + res.addressDetail
        addAddress(this.address).then(res => {
          if (res.code === 200) {
            this.show = false
            console.log(res);
            this.$toast('地址添加成功');
            this.getAddress()
          }else{
            this.$toast('地址添加失败，请稍后重试');
          }
        })
      },

      // 保存修改
      onSave1(res){
        console.log(res);
        this.address.userId = String(this.$store.getters['common/user'].id),
        this.address.id = res.id,
        this.address.name = res.name,
        this.address.phone = res.tel,
        this.address.address = res.province + res.city + res.county + res.addressDetail,
        this.address.tag = res.areaCode + '/' + res.addressDetail
        editAddress(this.address).then(res => {
          if (res.code === 200) {
            this.show1 = false
            console.log(res);
            this.$toast('地址添加成功');
            this.getAddress()
          }else{
            console.log(res);
            this.$toast('地址添加失败，请稍后重试');
          }
        })
      },

      // 获取用户地址
      getAddress(){
        myAddress(this.$store.getters['common/user'].id).then(res => {
          this.list = res.data.map(it => {
            return {
              id:it.id,
              name:it.name,
              tel:it.phone,
              address:it.address,
              tag:it.tag,
              isDefault: false,
            }
          })
        })
      }
    },

    created () {
      this.getAddress()
    },

    // watch:{
    //   chosenAddressId(val){
    //     console.log(val);
        
    //   }
    // }
  }
</script>

<style lang="less" scoped>
  .me-box{
    height: 100%;
    .list{
      height: calc(100% - 50px);
      .van-radio-group{
        overflow-x: hidden;
        height: calc(100% - 96px);
      }
    }
  }
</style>